<template>
	<div class="add-goods">
		<!-- 面包屑 -->
		<div class="title">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path:'/goods'}">商品管理</el-breadcrumb-item>
				<el-breadcrumb-item>添加商品</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<!-- 表单数据 -->
		<div class="myform">
      <el-form :model="goodsForm" :rules="rules" ref="goodsForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="类目选择" >
          <el-button type="primary">类目选择</el-button>
        </el-form-item>
        <el-form-item label="商品名称" prop="title">
          <el-input v-model="goodsForm.title"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="goodsForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="num">
          <el-input v-model="goodsForm.num"></el-input>
        </el-form-item>
        <el-form-item label="商品卖点" prop="sellPoint">
          <el-input v-model="goodsForm.sellPoint"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="image">
          <el-button type="primary">上传图片</el-button>
        </el-form-item>
        <el-form-item label="商品描述" prop="desc">
          <textarea name="" cols="30" rows="10" ></textarea>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('goodsForm')">确定</el-button>
          <el-button @click="resetForm('goodsForm')">重置</el-button>
        </el-form-item>
      </el-form>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      goodsForm: {
        title: '',  //商品名称
        price: '',  //商品价格
        sellPoint: '', //商品卖点
        image: '',  //商品图片
        delivery: false,
        category: "", //商品类目
        desc: '',  //商品描述
        num:"" //商品数量
      },
      rules: {
        title: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请选择商品价格', trigger: 'blur' }
        ],
        sellPoint: [
          { required: true, message: '请选择商品卖点', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请选择商品数量', trigger: 'blur' }
        ],
        // desc: [
        //   { required: true, message: '请填写商品描述', trigger: 'blur' }
        // ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
          console.log(formName)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style lanng="less" scoped>
	.add-goods {
		margin: 20px;
	}

	.title {
		padding: 10px;
		background-color: #fff;
		border: 1px solid #eee;
		margin-bottom: 20px;
	}

	.myform {
		background: #fff;
		padding: 10px;
    padding-right: 60px;
	}
	.line{
		text-align: center;
	}
</style>
